<template>
  <!-- <SlotsBase>
    <div>
      <h3>插槽标题</h3>
      <p>插槽内容</p>
    </div>
  </SlotsBase> -->
  <!-- <SlotsTwo> -->
  <!-- 插槽内容可以访问到父组件的数据和样式作用域，因为插槽内容本身是在父组件模板中定义的。 -->
  <!-- <template #header>
      <h3 class="text">标题：{{ message }}</h3>
    </template>
    <template v-slot:main>
      <h4>内容：{{ message }}</h4>
    </template> -->
  <!-- 以下内容不会显示在任何一个插槽里 -->
  <!-- <h5>我是测试内容</h5>
  </SlotsTwo> -->
  <SlotsAttr>
    <template #header="slotProps">
      <h3 class="text">{{ currentTest }} - {{ slotProps.msg }}</h3>
    </template>
    <template #main="slotProps">
      <p>{{ currentTest }} -- {{ slotProps.msg }}</p>
    </template>
  </SlotsAttr>
</template>

<script>
import SlotsBase from './components/SlotsBase.vue';
import SlotsTwo from './components/SlotsTwo.vue';
import SlotsAttr from './components/SlotsAttr.vue';
export default {
  data() {
    return {
      message: "插槽内容文本信息",
      currentTest: "测试内容"
    }
  },
  components: {
    SlotsBase,
    SlotsTwo,
    SlotsAttr
  }
}
</script>
<style scoped>
.text {
  font-size: 20px;
  color: rgb(190, 51, 195);
}
</style>